<template>
	<u-popup :show="isShow" closeIconPos @close="isShow = false" bgColor="rgba(0,0,0,0)" :safeAreaInsetBottom="false" round="20rpx">
		<view class="position-relative wrapper rounded-radius-l bg-white overflow-hidden">
			<view class="position-absolute top-0 left-0 w_100 h_100" style="filter: blur(20px); background: rgba(242,242,246, 1)"></view>
			<view class="position-absolute top-0 left-0 w_100 h_100">
				<view class="w_100 flex align-center justify-between title_box border-box">
					<view @click="isShow = false" style="width: 80rpx;" class="flex align-center justify-start">
						<text class="close_text font-md-g font-weight-heavy">取消</text>
					</view>
					<view class="">
						<text class="font-md-g font-weight-heavy">筛选组讯</text>
					</view>
					<view style="width: 80rpx;" class="flex justify-end">
						<image @click="isShow = false" src="/static/close.svg" class="rounded-circle" style="height: 60rpx; width: 60rpx" mode=""></image>
					</view>
				</view>
				<scroll-view class="scroll_box border-box " scroll-y="true" >
					<view class=" rounded-radius-l bg-white my-2 border-box mx-32">
						<view @click="tapItem(item)" v-for="(item, index) in list" :key="index"  class="px-32  flex align-center">
							<view class="">
								<u-icon v-if="act === item" name="/static/selected.svg" size="48rpx"></u-icon>
								<u-icon v-else name="/static/not_selected.svg" size="48rpx"></u-icon>
							</view>
							<view class="flex-1 ml-2 py-2" style="border-color: rgba(60, 60, 67, 0.36);" :class="[index !== list.length - 1 ? 'border-bottom' : '']">
								<text class="font-md-g font-weight-normal">{{item}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
		</view>
	</u-popup>
</template>

<script setup>
	import { ref, watch } from 'vue'
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: []
		},
		act: {
			type: String,
			default: '全国'
		}
	})
	const isShow = ref(false)
	const emits = defineEmits(['update:show', 'click']) // 声明emit
	const tapItem = (item) => {
		emits('click', item)
		isShow.value = false
	}
	watch(() => props.show, () => {
	   isShow.value = props.show
	})
	watch(() => isShow.value, () => {
	    emits('update:show', isShow.value)
	})
</script>

<style lang="scss" scoped>
	.wrapper {
		height: 84vh;
		.title_box {
			height: 100rpx;
			padding: 0 24rpx;
			.close_text {
				color: rgba(63, 81, 140, 1);
			}
		}
		.scroll_box {
			height: calc(100% - 50rpx);
		}
	}
</style>